<template>
  <div class="disposeGather">
    <div v-if="$route.path=='/gather/financeDispose'">
      <div class="bgg">
        <div class="card_title">
          商品管理
        </div>
        <div class="groupbox" style="margin-bottom: 19px">
          <div class=" ">
            <a-space align="baseline">
              <span class="title">用户：</span>
              <a-input v-model="add_user" placeholder="用户名称" class="ipt br4"/>
              <span class="title">处理用户：</span>
              <a-input v-model="user_id" placeholder="用户名称" class="ipt br4"/>
              <span class="title">录入时间段：</span>
              <a-range-picker
                :ranges="{
                  本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
                  上周: [
                    moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
                    moment().subtract(parseInt(moment().format('d')), 'days')
                  ],
                  本月: [
                    moment()
                      .month(moment().month())
                      .startOf('month'),
                    moment()
                      .month(moment().month())
                      .endOf('month')
                  ],
                  上月: [
                    moment(
                      moment()
                        .subtract(1, 'month')
                        .format('YYYY-MM') + '-01'
                    ),
                    moment(
                      moment()
                        .subtract(1, 'month')
                        .format('YYYY-MM') + '-01'
                    )
                      .subtract(-1, 'month')
                      .add(-1, 'days')
                  ],
                  半年: [
                    moment()
                      .startOf('day')
                      .subtract(6, 'month'),
                    moment()
                  ]
                }"
                format="YYYY-MM-DD"
                @change="passChange"
                class="timepacker br4"
                style="width:230px;"
              >
              </a-range-picker>
            </a-space>
          </div>
          <div class="" style="margin-top: 12px">
            <a-space align="baseline">
              <span class="title">商品id：</span>
              <a-input v-model="item_id" placeholder="商品id" class="ipt br4"/>
              <span class="title">店铺：</span>
              <a-input v-model="shop_name" placeholder="店铺名称" class="ipt br4"/>
              <span class="title">商品标题：</span>
              <a-input v-model="goodsname" placeholder="商品标题" class="ipt br4"/>
            </a-space>
          </div>
          <div class="h24" style="margin-top: 12px">
            <a-space align="baseline">
              <a-radio-group v-model="status" style="margin-bottom: 5px;margin-left:5px;" @change="statusChange">
                <a-radio-button :value="v.id" v-for="(v,k) in classList" :key="k">
                  {{ v.name }}
                </a-radio-button>
              </a-radio-group>
              <a-button type="primary" :disabled="btnloading" size="small" class="br4" @click="getFinanceGoods(1)">
                <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
                {{ btnloading===true?'搜索中...':'搜索' }}
              </a-button>
            </a-space>
          </div>
        </div>
        <div class="activitytable">
          <a-table
            :columns="columns"
            :rowKey="activity => activity.id"
            :dataSource="activity"
            :loading="loading"
            @change="handleTableChange"
            :pagination="pagination"
          >
            <div slot="img" slot-scope="text, row">
              <img :src="row.img" alt="" class="br4" style="width: 80px;height: 80px;">
            </div>
            <div slot="short_title" slot-scope="text, row">
              <div style="font-size: 13px;width:174px;">
                <div class="line-1"><a :href="'https://detail.tmall.com/item.htm?id='+row.item_id" target="_blank">{{
                  row.short_title }}</a></div>
                <div>商品ID：{{ row.item_id }}</div>
                <div>店 铺 ：{{ row.shop_name }}</div>
                <!--              <div>销 量 ：{{ row.pd_detailArr.sellCount }}</div>-->
                <div><span class="black blod" style="font-weight: 600">￥{{ row.after_price }}</span> /
                  <span>￥{{ row.price }}</span></div>
              </div>
            </div>
            <div slot="copywriting" slot-scope="text, row">
              <div style="font-size: 13px;width: 190px">
                <div class="line-3">[<span class="a_blue">{{ row.goods_category }}</span>] {{ row.copywriting }}</div>
              </div>
            </div>
            <div slot="commission" slot-scope="text, row">
              <div style="font-size: 13px;width: 84px">
                <div>佣金：{{ row.commission }}%</div>
                <div>服务：{{ row.service_rate }}%</div>
              </div>
            </div>
            <div slot="coupon_url" slot-scope="text, row">
              <div style="font-size: 13px;width:158px;">
                <a :href="row.coupon_url" target="_blank" rel="noopener noreferrer" style="display: block">
                  <div class="coupon flex">
                    <span class="couponleft">{{ row.coupon_name }}</span>
                    <span class="couponright">{{ row.coupon_price }}</span>
                  </div>
                </a>
                <div>数量/剩余：{{ row.coupon_all_num }}/{{ row.coupon_surplus }}</div>
                <div>起：{{ row.coupon_start_time }}</div>
                <div>止：{{ row.coupon_end_time }}</div>
              </div>
            </div>
            <div slot="status" slot-scope="text, row">
              <div
                :style="{
                  // color:row.status===9&&row.pd_hdkState===9&&row.pd_shzState===9?'#040404':'#39C15B',
                  fontSize:'13px',
                  width:'40px'
                }">{{ row.status === 1?'待处理':
                row.status === 2?'已接单待推广':
                row.status === 3?'正在推广':
                row.status === 4?'已结算待提交券截图':
                row.status === 5?'待审核截图':
                row.status === 6?'审核失败':
                row.status === 7?'审核成功待打款':
                '打款成功' }}
              </div>
            </div>
            <div slot="active" slot-scope="row">
              <div>
                <a-button type="link" @click="goedit(row)">详情</a-button>
              </div>
              <!--              <div>-->
              <!--                <a-button type="link" @click="dotransfer(row)">转移商品</a-button>-->
              <!--              </div>-->
            </div>
          </a-table>
        </div>
      </div>
      <a-drawer
        title="转移商品"
        :width="513"
        :visible="drawer2show"
        :body-style="{ paddingBottom: '80px' }"
        @close="onClose"
      >
        <div class="drawer1">
          <div class="titles flex col_cente">处理商品 <span class="line-1" style="color:#2396F9;padding-left:5px">{{ goodsname2 }}</span>
          </div>
          <div class="titles">选择目标</div>
          <a-select
            v-model="user_id"
            placeholder="选择处理人员"
            class="br4"
            style="width:464px;height: 30px;">
            <a-select-option :value="v.user_id" v-for="(v,k) in userList" :key="k">
              {{ v.user }}
            </a-select-option>
          </a-select>
          <div
            :style="{
              position: 'absolute',
              right: 0,
              bottom: 0,
              width: '100%',
              borderTop: '1px solid #e9e9e9',
              padding: '10px 16px',
              background: '#fff',
              textAlign: 'right',
              zIndex: 1
            }"
          >
            <a-button type="primary" style="float:left;" :loading="btnloading" class="br4" @click="dosubmit">
              确认转移
            </a-button>
          </div>
        </div>
      </a-drawer>
    </div>
    <router-view v-else></router-view>
  </div>
</template>

<script>
  import { getFinanceGoods, getCollectionUserList, doTransferGoods } from '@/api/gatherApi'
  import moment from 'moment'

  export default {
    name: 'DisposeGather',
    data () {
      return {
        moment,
        id: '',
        user_id: '',
        drawer2show: false,
        start: '',
        end: '',
        add_user: '',
        status: 1,
        shop_name: '',
        goodsname: '',
        goodsname2: '',
        item_id: '',
        search: '',
        pagination: {
          pageSize: 15,
          page: 1
        },
        columns: [
          {
            title: '提交时间',
            width: 104,
            dataIndex: 'time',
            scopedSlots: {
              customRender: 'time'
            }
          },
          {
            title: '处理用户',
            dataIndex: 'user',
            scopedSlots: {
              customRender: 'user'
            }
          },
          {
            title: '商品',
            dataIndex: 'short_title',
            scopedSlots: {
              customRender: 'short_title'
            }
          },
          {
            title: '文案',
            dataIndex: 'copywriting',
            scopedSlots: {
              customRender: 'copywriting'
            }
          },
          {
            title: '费率',
            dataIndex: 'commission',
            scopedSlots: {
              customRender: 'commission'
            }
          },
          {
            title: '对接服务费',
            dataIndex: 'docking_service_rate',
            scopedSlots: {
              customRender: 'docking_service_rate'
            }
          },
          {
            title: '付款时间',
            dataIndex: 'pay_time',
            scopedSlots: {
              customRender: 'pay_time'
            }
          },
          {
            title: '付款金额',
            dataIndex: 'pay_price',
            scopedSlots: {
              customRender: 'pay_price'
            }
          },
          {
            title: '状态',
            dataIndex: 'status',
            scopedSlots: {
              customRender: 'status'
            }
          },
          {
            title: '备注',
            dataIndex: 'remark',
            scopedSlots: {
              customRender: 'remark'
            }
          },
          {
            title: '操作',
            scopedSlots: {
              customRender: 'active'
            }
          }
        ],
        activity: [
          // {
          //   id: 1, // 自增id
          //   item_id: '546255651271', // 商品id
          //   short_title: '荔园咸鸭蛋黄酥2枚雪媚娘休闲零食早餐糕点心网红小吃欧面包麻薯', // 商品标题
          //   shop_name: '荔园食品旗舰店', // 店铺名称
          //   goods_category: '食品', // 商品类目
          //   img: 'http://img.alicdn.com/imgextra/i1/3718824608/O1CN01pWZ9H91juVdNLVn59_!!3718824608.jpg', // 图片
          //   price: '68.00', // 原价
          //   copywriting: '【拍2件广西券50-15付0.1拍四件100-30付0.1【超值4包装】地道柳州螺蛳粉，8小时精炖汤底，征服挑剔味蕾，10分钟舌尖美食，酸辣鲜爽，豪华盛宴，丰盛满足！老人小孩都还爱吃呢！吃了还想吃~', // 推广文案
          //   friend_text: '【拍2件广西券50-15付0.1拍四件100-30付0.1【超值4包装】地道柳州螺蛳粉，8小时精炖汤底，征服挑剔味蕾，10分钟舌尖美食，酸辣鲜爽，豪华盛宴，丰盛满足！老人小孩都还爱吃呢！吃了还想吃~', // 朋友圈文案
          //   coupon_url: 'https://uland.taobao.com/quan/detail?sellerId=3718824608&activityId=cbfd7eec36d640349f1cf77da0ad03f3', // 优惠券地址
          //   coupon_start_time: '2021-01-23 11:27:27', // 开始时间
          //   coupon_end_time: '2021-01-23 11:27:27', // 结束时间
          //   coupon_name: '测试 ', // 优惠券名称
          //   coupon_full_price: '30', // 满多少
          //   coupon_price: '0.00', // 优惠券金额
          //   coupon_all_num: 0, // 优惠券总数
          //   coupon_surplus: 0, // 剩余数量
          //   after_price: '19.80', // 卷后价
          //   activity_type: 1, // 活动类型（1普通，2淘抢购，3聚划算）
          //   commission: '20', // 佣金bili
          //   service_rate: '10', // 真实服务费率
          //   settlement: '1', // 结算方式（1支付金额/结算券后价*服务费，2支付金额*服务费率，3累计使用张数或件数*服务费单价）
          //   user_id: 78, // 处理人id
          //   status: 1, // 状态（1待接单，2已接单待推广，3正在推广，4已结算待提交券截图，5待审核截图，6审核失败，7审核成功待打款，8打款成功）
          //   coupon_img: '', // 优惠券开券截图（可选）
          //   coupon_extension_img: '', // 优惠券推广完毕截图（可选）
          //   user: '从雪艳' // 处理用户名称
          // }
        ],
        loading: false,
        username: '',
        classList: [
          {
            name: '所有',
            id: 1
          },
          {
            name: '待处理',
            id: 2
          },
          {
            name: '已处理',
            id: 3
          }
        ],
        btnloading: false,
        userList: [
          // {
          //   user: "王鹏云", //用户
          //   user_id: 78, //用户id
          //   id: 1 //采集表自增id
          // }
        ]
      }
    },
    watch: {
      shop_name: function (val) {
        if (val !== '') {
          console.log(val)
          this.search = val
        }
      },
      goodsname: function (val) {
        if (val !== '') {
          console.log(val)
          this.search = val
        }
      }
    },
    computed: {},
    created () {
      this.getFinanceGoods(1)
      this.getCollectionUserList()
    },
    mounted () {
    },
    methods: {
      dotransfer (row) {
        this.goodsname2 = row.short_title
        this.id = row.id
        this.drawer2show = true
      },
      getCollectionUserList () {
        getCollectionUserList().then(res => {
          console.log(res)
          this.userList = res.data
        }).catch(err => {
          console.log(err)
        })
      },
      onClose () {
        this.drawer2show = false
      },
      dosubmit () {
        if (this.user_id !== '' && this.goodsname2 !== '') {
          doTransferGoods({
            id: this.id,
            user_id: this.user_id
          }).then(res => {
            console.log(res)
            this.id = ''
            this.user_id = ''
            this.$message.success('转移成功!')
            this.drawer2show = false
          }).catch(err => {
            console.log(err)
          })
        } else {
          this.$message.info('请检查转移条件!')
        }
      },
      goedit (row) {
        this.$store.dispatch('setIssuename', row)
        this.$router.push({
          path: '/gather/financeDispose/financeInfo'
        })
      },
      statusChange (value) {
        console.log(value, this.status) //
      },
      passChange (dates, dateStrings) {
        // console.log('From: ', dates[0], ', to: ', dates[1])
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
        this.start = dates[0].unix()
        this.end = dates[1].unix()
        console.log(this.start, this.end)
        // const str = moment(dateStrings[0]).format('YYYY-MM-DD') + ' 至 ' + moment(dateStrings[1]).format('YYYY-MM-DD')
      },
      getFinanceGoods (page) {
        this.loading = true
        this.btnloading = true
        getFinanceGoods({
          item_id: this.item_id,
          add_user: this.add_user,
          user_id: this.user_id,
          shop_name: this.shop_name,
          search: this.search,
          status: this.status, // 1=所有（审核成功待打款，打款成功，复核异常），2待处理（审核成功待打款），3已处理（打款成功，复核异常）
          start: this.start,
          end: this.end,
          page: page,
          pagesize: 15
        }).then(res => {
          console.log(res)
          this.activity = res.data.data
          const pagination = {
            ...this.pagination
          }
          pagination.total = res.data.total
          this.pagination = pagination
          this.loading = false
          this.btnloading = false
        }).catch(err => {
          console.log(err)
        })
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getFinanceGoods(params.page)
      }
    }
  }
</script>
<style lang="less">
  .drawer1 {
    .titles {
      color: rgba(16, 16, 16, 100);
      font-size: 13px;
      text-align: left;
      margin-bottom: 8px;
    }

    .chooseipt {
      width: 100%;
      margin-bottom: 25px;
    }

    /deep/ .ant-input {
      border-radius: 4px;
    }

    /deep/ .ant-select-selection {
      border-radius: 4px;
    }
  }
</style>
<style lang="less" scoped>
  .disposeGather {
    .card_title {
      color: #101010;
      font-size: 20px;
      margin-bottom: 18px;
      font-weight: 600;
    }

    .bgg {
      border-radius: 8px;
      margin-top: 10px;
      padding: 10px;
    }

    .groupbox {
      /deep/ .ant-input {
        border-radius: 4px;
      }
    }

    .h24 {
      /deep/ .ant-radio-button-wrapper {
        height: 24px;
        line-height: 22px;
      }
    }

    /deep/ .ant-table-body {
      border: 1px solid #BBBBBB;
      border-radius: 8px 8px 0 0;
    }

    /deep/ .ant-table-tbody {
      background-color: #ffffff;
    }

    /deep/ .ant-table-pagination.ant-pagination {
      float: none !important;
      margin: 16px auto !important;
      text-align: center !important;
    }

    .a_blue {
      color: #2396F9;
    }

    .title {
      color: #101010;
      font-size: 14px;
      font-weight: 600;
    }

    .ipt {
      width: 138px;
      height: 24px;
    }

    .timepacker {
      /deep/ .ant-calendar-picker-input {
        padding: 0;
        height: 24px;
      }
    }

    .selecth24 {
      /deep/ .ant-select-selection__rendered {
        line-height: 24px;
      }

      /deep/ .ant-select-selection {
        height: 24px;
        border-radius: 4px;
      }
    }

    .coupon {
      /*border: 1px solid rgb(255, 85, 64);*/
      text-align: center;
      font-size: 14px;
      border-radius: 4px;
      overflow: hidden;
      width: 96px;
      /*margin: 0 auto;*/

      .couponleft {
        width: 48px;
        height: 24px;
        line-height: 24px;
        background-color: rgb(255, 85, 64);
        color: #ffffff;
      }

      .couponright {
        width: 48px;
        height: 24px;
        line-height: 21px;
        background-color: #ffffff;
        color: rgb(255, 85, 64);
        border: 1px solid #ff5540;
        border-radius: 0 4px 4px 0;
      }
    }
  }
</style>
